<%@ include file="/WEB-INF/views/commonJSTL.jsp" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<c:set var="i" value="0"/>

<!DOCTYPE html>
<html>
	<head>
	<title>FarmaSoft</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<%@ include file="/WEB-INF/views/commonResources.jsp" %>
	<script type="text/javascript">
	$(document).ready(function(){
		/*
		$("#newButton").click(function(){
			location.href = "new?_menuId=2&_subMenuId=4&_optionId=1";
		});
		
		$(".testButton").click(function(){
			openDialog(function(){
				$( "#dialog-modal" ).dialog( "option", "title", "Title Modified." );
			});
		});
		*/
		
		$("#showHide").click(function(){
			if( $("#usersDischarged").css('display') == 'none'){
                $("#usersDischarged").css('display', 'block');
                $(this).attr("value","Ocultar Bajas");
                $(this).attr("title","Pulsa aqui para ocultar bajas");
            }else{
                $("#usersDischarged").css('display', 'none');
                $(this).attr('value', 'Mostrar Bajas');
                $(this).attr('title', 'Pulsa aqui para mostrar bajas');
            }
		});		
		$(".addNewProvider").click(function(){
			$("#dialogNewProvider").load('<spring:url value="/ProductAndActiveSubstance/formNewProvider" htmlEscape="true" />',function(){
				openDialogModalForm("#dialogNewProvider","Nuevo Proveedor",null);
			});
		});		
		$("#dialogNewProvider").dialog({autoOpen: false, height: 480, width: 700, modal: true,
			buttons: {
	            "Aceptar": function() {	            	
	            	var flag = $("#formProvider").valid();
	                if(flag){
		            	var urlTemp = ($("#providerIdTemp").val() != '')?'<spring:url value="/ProductAndActiveSubstance/formEditProvider" htmlEscape="true" />':'<spring:url value="/ProductAndActiveSubstance/formNewProvider" htmlEscape="true" />';
		            	$.ajax({ 
		            		type: "POST",
		            		url: urlTemp,
			           	   	dataType: "json",			        		
                            data: $('#formProvider').serialize(),
			           	    success:function(data){
			           	    	$("#dialogNewProvider").dialog( "close" );
			           	    	mainProviders();
			           		}, 
			           		error: 	function(){alert('Error en request..');} }); 
	            	}
	            },
	            Cancelar: function() { $( this ).dialog( "close" );}
			},
			close: function(){ $( this ).dialog( "close" ); }
		});
		
	});
	function editProvider(providerId){
		$("#dialogNewProvider").load('<spring:url value="/ProductAndActiveSubstance/formEditProvider" htmlEscape="true" />?_providerId='+providerId,function(){
			openDialogModalForm("#dialogNewProvider","Editar Proveedor",function(){$("#providerIdTemp").val(providerId);});
		});
	}
	function giveLow(providerId,name){		
	    if(confirm("¿Estas seguro de dar de baja al Proveedor: "+name+"?")){
            $.ajax({
                url: "ajaxGiveLowOrHighToProvider",
                type: "GET",
                data:{providerId:providerId,active:false},
                beforeSend:function(obj){
                    $('#imgLoad').css({display:'block'});
                },
                success:function(res){
                	mainProviders();
                },
                complete:function(){
                    $('#imgLoad').css({display:'none'});
                },
                error: function(res){ alert("Error! al dar de Baja"); }
            });
        }
	}
	function giveHigh(providerId,name){
		 if(confirm("¿Estas seguro de dar de Alta al Proveedor: "+name+"?")){
	            $.ajax({
	                url: "ajaxGiveLowOrHighToProvider",
	                type: "GET",
	                data:{providerId:providerId,active:true},
	                beforeSend:function(obj){
	                    $('#imgLoad').css({display:'block'});
	                },
	                success:function(res){
	                	mainProviders();
	                },
	                complete:function(){
	                    $('#imgLoad').css({display:'none'});
	                },
	                error: function(res){ alert("Error! al dar de Alta"); }
	            });
	        }
	}
	function mainProviders(){
		location.href = "providers?_menuId=2&_subMenuId=4&_optionId=1";
	}
	/*
	function openDialog(callBack){
		$("#dialog-modal").dialog({
			 height: 140,
			 modal: true,
			 title:"Test title"
		 });
		if(callBack !== null){
			callBack();
		}
	}
	*/	
	</script>
	</head>
<body>
<div id="top-wrap">
		<%@include file="../../../head.jsp" %>
		<div id="bodySpace">               
		    <div class="clearfix" id="middle" style="position: absolute">  <!-- aqui va la ruta -->
		        <div id="breadcrumb"><!-- aqui va el arbol de entrada -->
		        	<ul>
	                	<li><a href="<spring:url value="/mainFront?" htmlEscape="true" />">Home</a></li>	
	                    <li><span style="color:#666"><fmt:message key="title.admin"/></span></li>
	                    <li><span style="color:#666"><fmt:message key="title.providers"/></span></li>
	                    <li class="current-page"><span class="end"><span class="middle"><fmt:message key="title.adminProviders"/></span></span></li>
	                </ul>
		        </div>
		    </div>
	                
	        <div id="principal">
	            <!-- izquierda -->
	            <div class="cuerpo2" style="border: 0px solid"><br/><br/>
	                <div class="izq" style="border: 0px solid">
	                    <%@include file="../../../bodyIzq.jsp" %>
	                </div>
	                <div class="der" style="border: 0px solid">
	                    <div id="imgLoad" style="float: left;width: 100%;display: none;"><img src="<c:url value="/resources/images/imgLoad/ajax-loader.gif" />" width="32" height="32" alt="ajax-loader.gif" style="position:absolute; top:30%; left:50%;"/></div>
	                    <div id="listAdmins" style="text-align: center">
	                    	                    
	                        <h2 class="decorado"><fmt:message key="title.listProviders"/></h2>
	                        <table class="miReporte" style="width: 100%">
	                            <tr>
	                                <td style="text-align: right"><input type="button" class="boton addNewProvider" value="<fmt:message key="button.New"/>" title='<fmt:message key="tooltip.newProvider"/>'/></td>
	                            </tr>
	                        </table>
	                        
	                        <div id="dialogNewProvider"></div> <!-- This is to new provider -->
	                        
	                        <table class="tabla_decorado" style="width: 100%">
	                            <thead>
	                                <tr>
	                                    <th width="3%" class="th_decoradoRowspan"><fmt:message key="table.num"/></th>
	                                    <th width="15%" class="th_decoradoRowspan"><fmt:message key="table.name"/></th>
	                                    <th width="15%" class="th_decoradoRowspan"><fmt:message key="table.companyName"/></th>
	                                    <th width="7%" class="th_decoradoRowspan"><fmt:message key="table.nit"/></th>
	                                    <th width="10%" class="th_decoradoRowspan"><fmt:message key="table.region"/></th>
	                                    <th width="10%" class="th_decoradoRowspan"><fmt:message key="table.locality"/></th>
	                                    <th width="10%" class="th_decoradoRowspan"><fmt:message key="table.address"/></th>
	                                    <th width="10%" class="th_decoradoRowspan"><fmt:message key="table.phone"/></th>
	                                    <th width="10%" class="th_decoradoRowspan"><fmt:message key="table.fax"/></th>
	                                    <th width="10%" class="th_decoradoRowspan" colspan="2"><fmt:message key="table.actions"/></th>
	                                </tr>
	                            </thead>
	                            <tbody>
	                            <c:forEach var="provider" items="${listProviders}">
	                            	<c:set var="i" value="${i+1}"/>
	                                <tr class="tr_decorado">
	                                    <td class="th_decorado" style="text-align: center">${i}</td>
	                                    <td class="th_decorado">${provider.name} &nbsp; (${provider.initials})</td>
	                                    <td class="th_decorado">${provider.socialReason}</td>
	                                    <td class="th_decorado">${provider.nit}</td>
	                                    <td class="th_decorado">${provider.locality.region.name}</td>
	                                    <td class="th_decorado">${provider.locality.name}</td>
	                                    <td class="th_decorado">${provider.address}</td>
	                                    <td class="th_decorado">${provider.phone} ${provider.phone2}</td>
	                                    <td class="th_decorado">${provider.fax}</td>
	                                    <td class="td_decoradoDerecha" style="text-align: center"><input type="button" value="Editar" onclick="editProvider(${provider.providerId})" class="botonRep" title="Pulsa aqu&iacute; para editar proveedor"/></td>
	                                    <td class="td_decoradoDerecha" style="text-align: center"><input type="button" value="Dar Baja" onclick="giveLow('${provider.providerId}','${provider.name}')" class="botonRep" title="Pulsa aqu&iacute; para dar de baja al proveedor"/></td>
	                                </tr>
	                           </c:forEach>
	                           <c:if test="${i==0}">
	                           		<tr class='tr_decorado'>
	                           			<td class='td_decorado' colspan='10' style='text-align:center'><span style='color:red'><fmt:message key="noProvidersRecords"/></span></td>
	                           		</tr>
	                           </c:if>
	                           </tbody>
	                        </table>
	                        
	                        <!-- Button that show and hidden the list baja providers -->    
	                        <table class="miReporte" style="width: 100%">
	                            <tr>
	                                <td style="text-align: right"><input type="button" id="showHide" value="Mostrar Bajas" class="boton" title="<fmt:message key="tooltip.providerDischarged"/>"/></td>
	                            </tr>
	                        </table><br/><br/>
	
	                        <!-- para mostrar bajas -->
	                        <div id="usersDischarged" style="text-align:center; display:none;">
	                            <h2 class="decorado"><fmt:message key="title.listProvidersDischarged"/></h2>
	                            <table class="tabla_decorado" style="width: 100%">
	                                <thead>
	                                    <tr>
	                                    	<th width="3%" class="th_decoradoRowspan"><fmt:message key="table.num"/></th>
		                                    <th width="15%" class="th_decoradoRowspan"><fmt:message key="table.name"/></th>
		                                    <th width="15%" class="th_decoradoRowspan"><fmt:message key="table.companyName"/></th>
		                                    <th width="7%" class="th_decoradoRowspan"><fmt:message key="table.nit"/></th>
		                                    <th width="10%" class="th_decoradoRowspan"><fmt:message key="table.region"/></th>
		                                    <th width="10%" class="th_decoradoRowspan"><fmt:message key="table.locality"/></th>
		                                    <th width="10%" class="th_decoradoRowspan"><fmt:message key="table.address"/></th>
		                                    <th width="10%" class="th_decoradoRowspan"><fmt:message key="table.phone"/></th>
		                                    <th width="10%" class="th_decoradoRowspan"><fmt:message key="table.fax"/></th>
		                                    <th width="10%" class="th_decoradoRowspan" colspan="1"><fmt:message key="table.actions"/></th>
	                                    </tr>
	                                </thead>
	                                <tbody>
	                                <c:set var="i" value="0"/>
	                                <c:forEach var="provider" items="${listProvidersDischarged}">
		                                <tr class="tr_decorado">
		                                    <td class="th_decorado" style="text-align: center">${i}</td>
		                                    <td class="th_decorado">${provider.name} &nbsp; (${provider.initials})</td>
		                                    <td class="th_decorado">${provider.socialReason}</td>
		                                    <td class="th_decorado">${provider.nit}</td>
		                                    <td class="th_decorado">${provider.locality.region.name}</td>
		                                    <td class="th_decorado">${provider.locality.name}</td>
		                                    <td class="th_decorado">${provider.address}</td>
		                                    <td class="th_decorado">${provider.phone} ${provider.phone2}</td>
		                                    <td class="th_decorado">${provider.fax}</td>                                
		                                    <td class="td_decoradoDerecha" style="text-align: center"><input type="button" value="Dar Alta" onclick="giveHigh('${provider.providerId}','${provider.name}')" class="botonRep" title="Pulsa aqu&iacute; para editar dar de alta el proveedor"/></td>
		                                </tr>
		                            </c:forEach>
		                            <c:if test="${i==0}">
		                           		<tr class='tr_decorado'>
		                           			<td class='td_decorado' colspan='9' style='text-align:center'><span style='color:red'><fmt:message key="noProviders.discharged"/></span></td>
		                           		</tr>
		                           	</c:if>
	                                </tbody>
	                            </table>
	                        </div> <!-- End pais id='paisBaja' -->
	                    </div> <!-- End id="listPais" -->
	                </div>
	            </div><!--end of leftPan-->
	        </div><!--end of content-wrapper-->
	    </div><!--end of body-wrap-->
	</div>
</body>
</html>
